<template>
  <div class="profile-tab">
    <v-form ref="form" v-model="valid" @submit.prevent="">
      <v-row>
        <!-- 头像上传和账户余额 -->
        <v-col cols="12">
          <v-row align="center" justify="center">
            <!-- 头像上传 -->
            <v-col class="text-center" cols="12" height="height" md="6">
              <div class="pa-3 border" style="border-radius: 10px">
                <v-avatar class="mb-4" size="100">
                  <v-img v-if="formData.avatar" :src="formData.avatar" />
                  <v-icon v-else color="primary" icon="mdi-account-circle" size="120" />
                </v-avatar>
                <div>
                  <v-btn
                    color="primary"
                    size="small"
                    variant="outlined"
                    @click="selectAvatar"
                  >
                    <v-icon icon="mdi-camera" start />
                    更换头像
                  </v-btn>
                  <input
                    ref="avatarInput"
                    accept="image/*"
                    style="display: none"
                    type="file"
                    @change="handleAvatarChange"
                  >
                </div>
              </div>
            </v-col>

            <!-- 账户余额 -->
            <v-col class="text-center" cols="12" md="6">
              <div class="border pa-3" style="border-radius: 10px">
                <v-icon color="primary lighten-1" icon="mdi-account-credit-card-outline" size="70" />
                <div class=" d-flex align-center justify-center">
                  <v-icon color="lighten-1" icon="mdi-cash-multiple" size="24" />
                  <div class="text-h5 font-weight-bold">{{ userInfo?.accountBalance }}</div>
                </div>
                <v-btn
                  class="mt-4"
                  color="primary"
                  size="small"
                  variant="outlined"
                  @click="openRechargeDialog"
                >
                  <v-icon icon="mdi-credit-card-outline" start />
                  充值
                </v-btn>
              </div>
            </v-col>
          </v-row>
        </v-col>

        <!-- 基本信息 -->
        <v-col cols="12" md="6">
          <v-text-field
            v-model="formData.nickName"
            label="昵称"
            prepend-inner-icon="mdi-account"
            :rules="nickNameRules"
            variant="outlined"
          />
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
            v-model="formData.email"
            label="邮箱"
            prepend-inner-icon="mdi-email"
            :rules="emailRules"
            variant="outlined"
          />
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
            disabled
            label="用户名"
            :model-value="userInfo?.account"
            prepend-inner-icon="mdi-account-circle"
            readonly
            variant="outlined"
          />
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
            disabled
            label="注册时间"
            :model-value="formatDate(userInfo?.createTime)"
            prepend-inner-icon="mdi-calendar"
            readonly
            variant="outlined"
          />
        </v-col>

        <!-- 最后登录时间 -->
        <v-col cols="12" md="6">
          <v-text-field
            disabled
            label="最后登录"
            :model-value="formatDate(userInfo?.lastLoginTime)"
            prepend-inner-icon="mdi-clock"
            readonly
            variant="outlined"
          />
        </v-col>

        <!-- 用户角色 -->
        <v-col cols="12" md="6">
          <v-text-field
            disabled
            label="用户角色"
            :model-value="getRoleText(userInfo?.role)"
            prepend-inner-icon="mdi-shield-account"
            readonly
            variant="outlined"
          />
        </v-col>

        <!-- 操作按钮 -->
        <v-col class="text-center" cols="12">
          <v-btn
            color="primary"
            :disabled="!isFormChanged"
            :loading="loading"
            size="large"
            variant="flat"
            @click="submitForm"
          >
            <v-icon icon="mdi-content-save" start />
            保存修改
          </v-btn>
        </v-col>
      </v-row>
    </v-form>

    <!-- 充值弹窗 -->
    <RechargeDialog
      v-model="showRechargeDialog"
      :current-balance="userInfo?.accountBalance || 0"
      @recharge="handleRecharge"
    />
  </div>
</template>

<script setup lang="ts">
  import RechargeDialog from '@/components/client/dialog/RechargeDialog.vue'
  import { rechargeService, updateUserInfoService } from '@/http/client/user.ts'
  import { useNotification } from '@/utils/notification.ts'

  interface Props {
    userInfo?: {
      nickName: string
      account: string
      email: string
      avatar: string
      role: string
      createTime: string
      lastLoginTime: string
      accountBalance: number
    }
  }

  const props = defineProps<Props>()
  const emit = defineEmits<{
    update: [userInfo: any]
  }>()

  const { showError, showSuccess } = useNotification()

  // 响应式数据
  const valid = ref(false)
  const loading = ref(false)
  const avatarInput = ref<HTMLInputElement>()
  const avatarFile = ref<File | null>(null)
  const showRechargeDialog = ref(false)

  // 表单数据
  const formData = reactive({
    nickName: '',
    email: '',
    avatar: '',
  })

  // 表单验证规则
  const nickNameRules = [
    (v: string) => !!v || '请输入昵称',
    (v: string) => (v && v.length >= 2) || '昵称至少需要2个字符',
    (v: string) => (v && v.length <= 20) || '昵称不能超过20个字符',
  ]

  const emailRules = [
    (v: string) => !!v || '请输入邮箱',
    (v: string) => /.+@.+\..+/.test(v) || '邮箱格式不正确',
  ]

  // 检查表单是否已更改
  const isFormChanged = computed(() => {
    if (!props.userInfo) return false
    return (
      formData.nickName !== props.userInfo.nickName
      || formData.email !== props.userInfo.email
      || avatarFile.value !== null
    )
  })

  // 监听用户信息变化，更新表单数据
  watch(() => props.userInfo, newUserInfo => {
    if (newUserInfo) {
      formData.nickName = newUserInfo.nickName || ''
      formData.email = newUserInfo.email || ''
      formData.avatar = newUserInfo.avatar || ''
    }
  }, { immediate: true })

  // 选择头像
  function selectAvatar () {
    avatarInput.value?.click()
  }

  // 处理头像变化
  function handleAvatarChange (event: Event) {
    const target = event.target as HTMLInputElement
    const file = target.files?.[0]

    if (file) {
      // 检查文件大小（限制2MB）
      if (file.size > 2 * 1024 * 1024) {
        showError('头像文件大小不能超过2MB')
        return
      }

      // 检查文件类型
      if (!file.type.startsWith('image/')) {
        showError('请选择图片文件')
        return
      }

      // 保存文件引用
      avatarFile.value = file

      // 创建预览URL
      const reader = new FileReader()
      reader.addEventListener('load', e => {
        formData.avatar = e.target?.result as string
      })
      reader.readAsDataURL(file)
    }
  }

  // 格式化日期
  function formatDate (dateString?: string) {
    if (!dateString) return '暂无'
    return new Date(dateString).toLocaleString('zh-CN')
  }

  // 获取角色文本
  function getRoleText (role?: string) {
    const roleMap: Record<string, string> = {
      USER: '普通用户',
      ADMIN: '管理员',
      VIP: 'VIP用户',
    }
    return roleMap[role || 'USER'] || '普通用户'
  }

  // 提交表单
  async function submitForm () {
    try {
      loading.value = true
      const form = new FormData()
      form.append('nickName', formData.nickName)
      form.append('email', formData.email)
      if (avatarFile.value) {
        form.append('avatarFile', avatarFile.value)
      }
      await updateUserInfoService(form)
      emit('update', formData)
      avatarFile.value = null
    } catch (error) {
      console.error('更新用户信息失败:', error)
    } finally {
      loading.value = false
    }
  }

  // 打开充值弹窗
  function openRechargeDialog () {
    showRechargeDialog.value = true
  }

  // 处理充值
  async function handleRecharge (data: { amount: number, paymentMethod: string }) {
    await rechargeService({
      amount: data.amount,
      paymentMethod: data.paymentMethod,
    }).then(() => {
      showSuccess('充值成功')
    })
    if (props.userInfo) {
      const updatedUserInfo = {
        ...props.userInfo,
        accountBalance: props.userInfo.accountBalance + data.amount,
      }
      emit('update', updatedUserInfo)
    }
  }
</script>

<style scoped>
.profile-tab {
  max-width: 800px;
  margin: 0 auto;
}
</style>
